import { Meta, StoryObj } from '@storybook/react';
import Space, { SpaceProps } from '.';
import Button from '../Button/index';

const meta = {
  title: '布局/Space 间距',
  component: Space,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    wrap: {
      control: 'boolean',
    },
    direction: {
      control: 'inline-radio',
    },
    align: {
      control: 'inline-radio',
    },
  },
} satisfies Meta<typeof Space>;

export default meta;

type Story = StoryObj<typeof meta>;

const renderSpace = (args: SpaceProps) => {
  return (
    <Space {...args}>
      <Button primary label="primary"></Button>
      <Button label="default"></Button>
      <Button primary label="primary"></Button>
    </Space>
  );
};

export const Base: Story = {
  name: '基本用法',
  args: {
    direction: 'horizontal',
  },
  render: renderSpace,
};

export const Vertical: Story = {
  name: '垂直间距',
  args: {
    direction: 'vertical',
    size: 30,
  },
  render: renderSpace,
};

export const Wrap: Story = {
  name: '换行',
  args: {
    size: 30,
    wrap: true,
    style: {
      width: '300px',
    },
  },
  render: renderSpace,
};
